<template>
  <div class="money">
    <div class="money-item">
      <div class="money-top">
        <div class="top-left">
          <span>总资产</span>
          <p>{{value}}</p>
        </div>
        <div class="top-right">
          <button>充值</button>
        </div>
      </div>
      <div class="two-list">
        <div class="two-left">
          <span>
            累计充值(元)
          </span>
          <p>
            {{chong}}
          </p>

        </div>
        <div class="two-right">
          <span>累计消费</span>
          <p>
            {{xiaofei}}
          </p>
        </div>
      </div>

    </div>
    <div class="money-list">
      <div class="money-list-item">
        <van-icon name="diamond-o" />
        <p>账单记录</p>
      </div>
      <div class="money-list-item">
        <van-icon name="diamond-o" />
        <p>消费记录</p>
      </div>
      <div class="money-list-item">
        <van-icon name="diamond-o" />
        <p>充值记录</p>
      </div>
      <div class="money-list-item">
        <van-icon name="diamond-o" />
        <p>积分中心</p>
      </div>
    </div>

  </div>
</template>
<script>
import axios from "axios"
export default {
  data() {
    return {
      value: 0.00,
      chong: 0,
      xiaofei: 0,
      token:localStorage.token
    }
  },
  methods: {
    async getbalance(authoriZation) {
      await axios.get("https://api.java.crmeb.net/api/front/user/balance",{
        headers: {
          "authori-zation": authoriZation
        }
      }).then(res => {
        console.log(res.data.data);
        this.value=res.data.data.nowMoney
        this.chong=res.data.data.orderStatusSum
        this.xiaofei=res.data.data.recharge
      })
    }
  },
  created() {
    this.getbalance(this.token)
  }
}
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.money {
  padding-top: 20px;
  .money-item {
    width: 92%;
    margin: auto;
    background-color: #ff448f !important;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
    color: white;
    .money-top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 40px;
      button {
        color: red;
        width: 60px;
        border-radius: 20px;
      }
    }
    .two-list {
      display: flex;
      justify-content: space-between;
    }
  }
  .money-list {
    width: 92%;
    margin: auto;
    display: flex;
    justify-content: space-around;
    text-align: center;
    padding-top: 20px;
    box-sizing: border-box;
  }
}
</style>